﻿<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新春红包统计</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/layer.css" />
		<script src="js/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="laydate/laydate.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.hongbaotitle {
				text-align: center;
				background-color: #F7F7F7;
				padding: 10px 0;
				font-size: 16px;
				font-weight: 900;
			}
			
			.title {
				text-align: left;
				padding: 10px 0 10px 10px;
				border-bottom: 1px solid #cecece;
			}
			
			.input-textcenter {
				text-align: center;
			}
			
			.input-width {
				width: 100px;
				height: 30px;
			}
			
			.timebox {
				padding: 5px 0;
				border-bottom: 1px solid #cecece;
			}
			
			.box-content div{
				margin: 20px auto;
			}
			.first-content{
				margin-top: 20% !important;
			}
			.four-content{
				margin-bottom: 20% !important;
			}
			.first-content,.second-content,.three-content,.four-content{
				margin-left: 14% !important;
			}
			.number{
				position: absolute;
				left: 55%;
			}

            .table {
                width:100%;
            }

		</style>
	</head>

	<body>
		<div class="hongbaotitle">
			新春红包统计
		</div>
		<div style="border: 1px solid #cecece;">
			<div class="row timebox">
				<div class="col-xs-6 col-sm-6 col-md-6 input-textcenter">
					时间：<input type="text" class="input-width" id="starttime" /><span style="position: absolute;right: -5px;">至</span>
				</div>
				<div class="col-xs-4 col-sm-4 col-md-4 input-textcenter">
					<input type="text" class="input-width" id="endtime" />
				</div>
				<div id="" class="col-xs-2 col-sm-2 col-md-2">
					<button type="button" id="btnSubmit" class="btn btn-primary btn-xs" style="position: absolute;right: 20px;top: 5px;">查询</button>
				</div>
			</div>
			<div class="big-box">

				<div class="title">
					统计项
				</div>
				<div class="box-content">
					<div class="first-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;扫码数：<span id="PageNum" class="number"></span></div>
                    <div class="second-content">非会员扫码人数：<span id="NoMemberPageNum" class="number"></span></div>
                    <div class="second-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10元领取数：<span id="TenYuanNum" class="number"></span></div>
                    <div class="second-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20元领取数：<span id="TwentyYuanNum" class="number"></span></div>
                    <div class="second-content">&nbsp;&nbsp;&nbsp;&nbsp;66.6元领取数：<span id="SixtyYuanNum" class="number"></span></div>
					<div class="second-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红包领取数：<span id="ReceiveNum" class="number"></span></div>
					<div class="three-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;红包使用数：<span id="UseNum" class="number"></span></div>
					<div class="four-content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发放劵金额：<span id="OutAmount" class="number"></span></div>
				</div>
			</div>
		</div>
	</body>
    <script type="text/javascript">
        $(function () {
            var date = new Date();
            var dateTime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            $("#starttime").val(dateTime);
            $("#endtime").val(dateTime);

            $("#btnSubmit").click(function () {
                QueryCount();
            });
            QueryCount();
        })
        function QueryCount()
        {
            $.post("WXActivity/Posthandler.ashx", { "action": "HappyNewYearCount", "StartDate": $("#starttime").val(), "EndDate": $("#endtime").val() },
                    function (data) {
                        if (data.Success == true) {
                            if (data.Data.IsSuc == true) {
                                $("#PageNum").text(data.Data.PageNum);
                                $("#NoMemberPageNum").text(data.Data.NoMemberPageNum);
                                $("#TenYuanNum").text(data.Data.TenYuanNum);
                                $("#TwentyYuanNum").text(data.Data.TwentyYuanNum);
                                $("#SixtyYuanNum").text(data.Data.SixtyYuanNum);

                                $("#ReceiveNum").text(data.Data.ReceiveNum);
                                $("#UseNum").text(data.Data.UseNum);
                                $("#OutAmount").html(data.Data.OutAmount + '<span style="color: red;">￥</span>');
                            }
                            else {
                                data.Data.Message;//错误提示消息
                            }
                        }
                    })
        }

    </script>
	<script type="text/javascript">
		laydate.render({
		    elem: '#starttime',
		    value: new Date()
		});
		laydate.render({
		    elem: '#endtime',
		    value: new Date()
		});
	</script>

</html>